<template>
	<div class="table-demo-container layout-padding">
		<el-card shadow="hover" header="滚动通知栏">
			<NoticeBar
				text="🎉🎉🔥双击实验获取对应实验指导书!🎉🎉🔥"
			/>
		</el-card>
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<TableSearch :search="state.tableData.search" @search="onSearch" />
			<el-table stripe :data="state.tableData.data" v-loading="state.tableData.loading" @row-dblclick="showReport" class="table">
				<el-table-column type="index" label="序号" width="80" />
				<el-table-column prop="id" label="实验编号" width="180" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="实验名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="classroom" label="教室" show-overflow-tooltip></el-table-column>
				<el-table-column prop="starttime" label="开始时间" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="endtime" label="结束时间" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="description" label="实验描述" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				:current-page="state.tableData.param.pageNum"
				background
				:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</div>
		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
		<template>
			<iframe :src="filePath" v-show="showDocx"></iframe>
		</template>
	</div>
</template>

<script setup lang="ts" name="experimentsManagement">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { experimentTeacherInfo, getExperimentInfo, experimentStudentInfo } from '/@/api/experiments/management';
import { date } from '/@/utils/date';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';

// 引入组件
const TableSearch = defineAsyncComponent(() => import('/@/views/experiments/management/search.vue'));
const RoleDialog = defineAsyncComponent(() => import('/@/views/experiments/management/dialog.vue'));
const NoticeBar = defineAsyncComponent(() => import('/@/components/noticeBar/index.vue'));

// 定义变量内容
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const roleDialogRef = ref();
const filePath = ref(null);
const showDocx = ref(false);
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
		search: [
			{ label: '实验编号', prop: 'id', placeholder: '请输入想查询的实验编号', required: false, type: 'input' },
			{ label: '实验名称', prop: 'name', placeholder: '请输入想查询的实验名称', required: false, type: 'input' },
		],
	},
});

// 初始化列表数据
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = [];
	if (userInfos.value.roles[0] === 'teacher') {
		experimentTeacherInfo({ Page: state.tableData.param.pageNum, teacher_id: userInfos.value.Id })
			.then((res) => {
				if (res.code === '2000') {
					state.tableData.data = res.data.map((item: any) => {
						return {
							id: item.experiment_id,
							name: item.experiment_name,
							classroom: item.classroom,
							starttime: date(item.start_time),
							endtime: date(item.end_time),
							description: item.description,
						};
					});
					state.tableData.total = res.totalCount;
				} else {
					ElMessage.error('请求数据失败!');
				}
			})
			.catch((err) => {
				ElMessage.error('请求数据失败!' + err);
			});
	} else if (userInfos.value.roles[0] === 'student') {
		experimentStudentInfo({ Page: state.tableData.param.pageNum, lesson_id: userInfos.value.lesson_id })
			.then((res) => {
				if (res.code === '2000') {
					state.tableData.data = res.data.map((item: any) => {
						return {
							id: item.experiment_id,
							name: item.experiment_name,
							classroom: item.classroom,
							starttime: date(item.start_time),
							endtime: date(item.end_time),
							description: item.description,
						};
					});
					state.tableData.total = res.totalCount;
				} else {
					ElMessage.error('请求数据失败!');
				}
			})
			.catch((err) => {
				ElMessage.error('请求数据失败!' + err);
			});
	}
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 打开修改实验弹窗
const onOpenEditRole = (type: string, row: Object) => {
	roleDialogRef.value.openDialog(type, row);
};
// 删除实验
const onRowDel = (row: classManagementType) => {
	ElMessageBox.confirm(`此操作将永久删除班级：“${row.className}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {})
		.catch((err: any) => {
			ElMessage.error('删除失败' + err);
		});
};
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	const searchInfo = {
		experiment_id: data.id,
		experiment_name: data.name,
		Page: state.tableData.param.pageNum,
	};
	getExperimentInfo(searchInfo).then((res) => {
		if (res.code === '2000') {
			state.tableData.data = res.data.map((item: any) => {
				return {
					id: item.experiment_id,
					name: item.experiment_name,
					classroom: item.classroom,
					starttime: item.start_time,
					endtime: item.end_time,
					description: item.description,
				};
			});
			state.tableData.total = res.totalCount;
			state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
		} else {
			ElMessage.error('查询失败!');
		}
	});
};
// 双击查看实验指导书
const showReport = (row: any) => {
	showDocx.value = true;
	if (row.name === '基本运算器实验') {
		filePath.value = '/src/assets/report/1.docx';
	} else if (row.name === '静态随机存储器实验') {
		filePath.value = '/src/assets/report/2.docx';
	} else if (row.name === '微程序控制器实验') {
		filePath.value = '/src/assets/report/3.docx';
	} else if (row.name === '具有基本输入输出功能的总线接口实验') {
		filePath.value = '/src/assets/report/4.docx';
	} else if (row.name === 'CPU与简单模型机设计实验') {
		filePath.value = '/src/assets/report/5.docx';
	} else if (row.name === '复杂模型机设计实验') {
		filePath.value = '/src/assets/report/6.docx';
	} else if (row.name === '带中断处理能力的模型机设计实验') {
		filePath.value = '/src/assets/report/7.docx';
	}
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {
	.table-demo-padding {
		padding: 15px;
		.table-demo {
			flex: 1;
			overflow: hidden;
		}
		.table {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
